<template>
  <div class="theme-switcher">
    <button 
      :class="{ active: currentTheme === 'light-theme' }"
      @click="setTheme('light-theme')"
    >
      {{ $t('lightTheme') }}
    </button>
    <button 
      :class="{ active: currentTheme === 'dark-theme' }"
      @click="setTheme('dark-theme')"
    >
      {{ $t('darkTheme') }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from 'vue'

// 定义事件发射器
const emit = defineEmits<{
  (e: 'theme-changed', theme: string): void
}>()

// 响应式状态
const currentTheme = ref('light-theme')

// 方法定义
const setTheme = (theme: string) => {
  currentTheme.value = theme
  emit('theme-changed', theme)
}

// 生命周期钩子
onMounted(() => {
  const savedTheme = localStorage.getItem('selectedTheme')
  if (savedTheme) {
    currentTheme.value = savedTheme
  }
})
</script>

<style scoped>
.theme-switcher {
  display: inline-block;
}

.theme-switcher button {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.theme-switcher button:hover {
  background: #f5f5f5;
}

.theme-switcher button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}
</style>